const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const path = require('path')

module.exports={
	mode:'development',
	entry:'./src/two.js',
	output:{
		path: path.resolve(__dirname, 'dist'), 
		filename:'bundle.js'
	},
	devServer:{//开发服务器配置，功能包括serve和webpack打包[编译放到内存中]，这样就不会出现dist目录，因为它相当于是打包到内存中，而不是打包到磁盘中
	    static: {
			//默认从目录public下提供静态资源（没有被webpack打包的静态资源）给http服务使用；
			//因为devServer将代码打包到内存中，如果每次“打包”都将静态资源使用CopyWebpackPlugin复制到内存中，则太浪费资源
			//所以可以暂时不适用CopyWebpackPlugin，而是使用static来指定静态资源目录，由devServer将该目录下的静态资源纳入http服务
	        directory: path.join(__dirname, 'public1'),
	    },
		port: 8181,
		open: true,
		proxy:[
		  {
			context: ['/dev-api'],
			target: 'https://api.github.com',
			changeOrigin:true,
			pathRewrite:{
				'^/dev-api':'/'
			}
		  }
		]		
	},
	module:{
		rules:[{
			test: /.js$/,
			// use:{                 //babel有问题
			// 	loader:'babel-loader',
			// 	options:{
			// 		presets:['@babel/preset-env']//webpack自身就是个打包的工具，不能将es6代码转成es5，所以需要借助babel
			// 	}
			// }
		},{
			test: /.css$/,
			use:[
				'style-loader',
				'css-loader'
			]
		},
		{
			test: /.png$/,
			use: {
				loader: 'url-loader',//file-loader
				options:{
					limit:4*1024  //当图片大于该限制的时候，不再使用url-loader将图片转成data url，而是使用file-loader来copy文件
				}
			}
		}]
	},
	plugins:[
		new CleanWebpackPlugin(),//打包时清除dist目录里以前的文件
		new HtmlWebpackPlugin({//默认生成一个index.html文件
			template:'./src/index.html'//参考的模版
		}),
		// new CopyWebpackPlugin({//打包时，将一些静态资源文件（没有被webpack打包）复制到dist目标目录
		// 	patterns:[
		// 		{
		// 			from:'./public'
		// 		}
		// 	]
		// })
		//DefinePlugin  注入全局变量，默认的process.env.NODE_ENV
	]
}